<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title th:text="${title}"></title>
<div th:include="/common/layui"></div>
<div th:include="/common/jq"></div>


</head>
<body style="padding-top: 3px;">

<form class="layui-form" action="" lay-filter="example">
<div class="layui-inline">
    <label class="layui-form-label">图书名称：</label>
    <div class="layui-input-inline">
      <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  
   <div class="layui-inline">
    <div class="layui-input-inline">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>


<table class="layui-hide"   id="table" lay-filter="table"></table>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="reload_data">刷新</button>
  </div>
</script>

<script type="text/html" id="table_bar">
<div class="layui-btn-group">
	<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
</div>
</script>

</body>



<script type="text/html" id="format_type">
{{#  if(d.bookType){ }}
{{d.bookType.name}}
{{#  } else {  }}
空白
{{#  }   }}
</script>
<script th:inline="none">
		layui.use(['layer', 'table', 'form' ], function() {
			var form = layui.form
			,layer = layui.layer //弹层
			, table = layui.table; //表格
		
			
			//监听提交 lay-filter="search"
	        form.on('submit(search)', function(data){
	            var formData = data.field;
	            var name = formData.name;
	            var bookType = formData.bookType;
	                
	            //执行重载
	            table.reload('table', {
	                page: {
	                    curr: 1 //重新从第 1 页开始
	                }
	                , where: {//这里传参  向后台
	                    name: name
	                    //可传多个参数到后台...  ，分隔
	                }
	                , url: '/admin/book/search'//后台做模糊搜索接口路径
	                , method: 'post'
	            });
	            return false;//false：阻止表单跳转  true：表单跳转
	        });
			
			
			  table.render({
			    elem: '#table'
			    ,url: '/admin/book/list'
			    ,id: 'table'
				,page: true
				,limit:10
			    ,limits:[10,20,30,50]
			  	,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
			  	,cols: [[
			      {checkbox: true, fixed: true}
			      //,{field:'id', title: 'ID'}
			      ,{field:'orderNo', title: '排序号',sort: true}
			      ,{field:'bianhao', title: '图书编号'}
			      ,{field:'name', title: '图书名称'}
			      ,{field:'bookType', title: '图书类型',templet: '#format_type'}
			      ,{field:'author', title: '作者'}
			      ,{field:'danjia', title: '单价',sort: true}
			      ,{field:'press', title: '出版社'}
			      ,{field:'num', title: '库存数量'}
			      ,{field:'createDateTime', title: '创建时间',sort: true}
			      ,{field:'updateDateTime', title: '修改时间',sort: true}
			      ,{fixed:'right',title: '操作', toolbar: '#table_bar'}
			       ]]
			  });
			
			
			//头工具栏事件
			  table.on('toolbar(table)', function(obj){
			    var checkStatus = table.checkStatus(obj.config.id);
			    switch(obj.event){
			      case 'add':
			    	  layer.open({
			    		  type: 2,
						  title: '添加',
						  shadeClose: false,
						  shade: 0.8,
						  area: ['600px', '500px'],
						  content: '/houtai/book/add' //iframe的url
			    		}); 
			    	  //reload_data();
			      break;
			      case 'del':			    	   
			    	  var data  = checkStatus.data;
			    	  if(data.length!=0){
			    		  var params="";
			    		  $.each(data,function(i,item){
				                 if(i==0){
				                    params+="ids="+item.id;
				                }else{
				                    params+="&ids="+item.id;
				                } 
				            });
				    	  layer.confirm('您确定要删除吗', function(index){
				                //向服务端发送删除指令
				                $.post('/admin/book/delete',params,function(result){
				                	if(result.success){
						    			layer.closeAll();
						    			layer.msg('删除成功');
						    			  table.reload('table', {
								    			where: {}
								    	  		,page: {curr: 1}//重新从第 1 页开始
								    	    });
						    		}else{
						    			layer.closeAll();
						    			layer.alert('删除失败:'+result.msg);
						    		}
				                });
				            });
			    	  }else{
			    		  layer.closeAll();
			    		  layer.alert("请选择要删除的图书"); 	  
			    	  }
			      break;
			      case 'reload_data':
			    	  table.reload('table', {
			    			where: {}
			    	  		,page: {curr: 1}//重新从第 1 页开始
			    	    });
			      break;
			    };
			  });
			//监听工具条 table_bar
				table.on('tool(table)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					 var layEvent = obj.event; //获得 lay-event 对应的值
					 var id = data.id;
					 
					if (layEvent == 'edit') {
						
						layer.open({
							  type: 2,
							  title: '修改',
							  shadeClose: false,
							  shade: 0.8,
							  area: ['600px', '500px'],
							  content: '/houtai/book/edit?id='+id //iframe的url
							});
					}
				});
	
				 
		});
		//子窗口调用 的  关闭窗口方法 
		function closeDlg(msg){
			//此方法必须写在父窗口下，子类弹窗必须在父类才能关闭
			 layer.closeAll();
			 layer.msg(msg);
		}
</script>

</html>